<!--  -->
<template>
	<div class="material-design__wraper" :class="`material-design--${size}`">
		<label class="material-design__label" :class="isFocus ? 'material-design__label--focus' : ''">
			<!-- <el-input v-bind="$attrs" v-on="$listeners" v-model="inputValue" class="material-design__input" @focus="isFocus = true" @blur="handleBlur">
				<slot name="prefix" slot="prefix"></slot>
				<slot name="suffix" slot="suffix"></slot>
				<slot name="prepend" slot="prepend"></slot>
				<slot name="append" slot="append"></slot>
				<slot></slot>
			</el-input> -->
			<input :type="type" v-model="inputValue" class="material-design__input" @focus="isFocus = true" @blur="handleBlur"/>
			<div class="material-design__placeholder">{{placeholder}}</div>
			<div class="material-design__line" v-if="showLine" :style="lineStyle"></div>
		</label>
	</div>
</template>

<script>
export default {
	name: "MdInput",
	//import引入的组件需要注入到对象中才能使用
	components: {},
	props:{
		value: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: 'text'
		},
		size: {
			type: String,
			default: 'medium',
		},
		placeholder: {
			type: String,
			default: ''
		},
		bgPlaceholder: {
			type: String,
			default: 'transparent'
		},
		bgColor: {
			type: String,
			default: 'transparent'
		},
		showLine: {
			type: Boolean,
			default: true
		},
		lineWeight:{
			type: Number,
			default: 1
		},
		lineColor:{
			type: String,
			default: '#1890ff'
		}
	},
	data() {
		//这里存放数据
		return {
			inputValue: this.value,
			isFocus: false,
		};
	},
	//监听属性 类似于data概念
	computed: {
		lineStyle(){
			return {
				"--lh": this.lineWeight + 'px',
				"--color": this.lineColor
			}
		}
	},
	//监控data中的数据变化
	watch: {
		inputValue: {
			handler(val){
				this.$nextTick(() => {
					if(val){
						this.isFocus = true;
					}
				})
			},
			deep: true,
			immediate: true
		},
	},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {

	},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
		console.log(this.$attrs)
	},
	beforeCreate() {}, //生命周期 - 创建之前
	beforeMount() {}, //生命周期 - 挂载之前
	beforeUpdate() {}, //生命周期 - 更新之前
	updated() {}, //生命周期 - 更新之后
	beforeDestroy() {}, //生命周期 - 销毁之前
	destroyed() {}, //生命周期 - 销毁完成
	activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
	//方法集合
	methods: {
		handleBlur(){
			if(!this.inputValue){
				this.isFocus = false;
			}
		}
	}
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.material-design__wraper{
	height: 40px;
	margin-bottom: 20px;
	.material-design__label{
		position: relative;
		display: block;
		height: 100%;

		.material-design__placeholder{
			position: absolute;
			z-index: 2;
			display: flex;
			top:0;
			height: 100%;
			align-items: center;
			padding: 0 10px;
			transition: all 0.3s;
			font-size: 16px;
		}

		.material-design__input{
			border:0 none;
			color:#000;
			height: 100%;
			width: 100%;
			padding: 5px 12px;
		}

		.material-design__line{
			height: var(--lh);
			background-color: transparent;
			position: absolute;
			bottom: -var(--lh);
			z-index: 3;
			left:0;
			right:0;
			margin: auto;
			&::before{
				content: "";
				position: absolute;
				background-color: var(--color);
				right:50%;
				height: var(--lh);
				left:50%;
				transition: all 0.3s;
			}
			&::after{
				content: "";
				position: absolute;
				background-color: var(--color);
				left:50%;
				height: var(--lh);
				right:50%;
				transition: all 0.3s;
			}
		}
		&.material-design__label--focus{
			.material-design__placeholder{
				transform: scale(0.85) translateY(-24px);
				opacity: 0.75;
			}
			.material-design__line::before{
				left:0;
			}
			.material-design__line::after{
				right:0;
			}
		}
	}
}
// animation: expand 3s ease infinite alternate;
@keyframes expand {
	0% {
		left: 50%; /* 初始状态，线段居于页面水平中心位置 */
		transform: scaleX(0); /* 初始状态，线段长度为0 */
	}
	100% {
		left: -50%; /* 结束状态，线段左移到页面最左侧 */
		transform: scaleX(1); /* 结束状态，线段完全展开 */
	}
}
</style>